<template>
  <el-dialog title="物流进度" v-model="progressDialogVisible" width="50%">
    <el-timeline style="max-width: 600px">
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :icon="activity.icon"
        :type="activity.type"
        :color="activity.color"
        :size="activity.size"
        :hollow="activity.hollow"
        :timestamp="activity.time"
      >
        {{ activity.context }}
      </el-timeline-item>
    </el-timeline>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import expressData from '@/api/constants/express.js'
// 对话框的显示和隐藏
const progressDialogVisible = ref(false)

// 物流进度数据
const activities = ref(expressData.data)
// 打开对话框
const open = () => {
  progressDialogVisible.value = true
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
</style>